<template>
  <div>
    <el-row class="tigan">
      试题题干：
      <div class="editorBox">
        <TinymceEditor
          class="tiganIpt"
          ref="editor"
          v-model="modelValue.subjectEditorValue"
          :height="200"
        />
      </div>
    </el-row>
    <div class="p10">
      <el-row class="hoverOptions" v-for="(item,i) in modelValue.options" :key="i">
        <el-col :span="12">
          <el-checkbox @change="optChange(i)" v-model="item.isAnswer" size="large" :label="(i+1)+'.'" />
          <el-input class="inputInline" v-if="i==0" disabled v-model="props.zhengque"></el-input>
          <el-input class="inputInline" v-else disabled v-model="props.cuowu"></el-input>
          <el-tooltip effect="light" content="选项反馈" placement="top-start">
            <el-icon class="feedbackIcon" @click="feedback(i)">
              <Position />
            </el-icon>
          </el-tooltip>
        </el-col>
        <el-col
          style="border-top: 1px dashed #dcdfe8;padding-top:15px;margin-top:15px;padding-bottom:20px;"
          v-if="item.optionTipEditorShow||item.optionTipEditorValue.length>0"
        >
          <el-row class="feedback">
            选项反馈：
            <div class="editorBox">
              <TinymceEditor v-model="item.optionTipEditorValue" :height="80" />
            </div>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-row style="border-top: 1px dashed #dcdfe8;;padding-top:10px">
      <el-col :span="4">
        <el-button type="primary" text :icon="Plus" @click="addAnalysis">添加试题解析</el-button>
      </el-col>
    </el-row>
    <el-row
      v-if="modelValue.explainEditorShow||modelValue.explainEditorValue.length>0"
      class="jiexi2"
    >
      试题解析：
      <div class="editorBox">
        <TinymceEditor ref="editor" v-model="modelValue.explainEditorValue" :height="80" />
      </div>
    </el-row>
  </div>
</template>
<script setup>
import { getCurrentInstance,  toRefs, ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'

import {
  Plus,
} from '@element-plus/icons-vue'
import TinymceEditor from '../component/Editor/index.vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: [String, Object, Array],
    default: null,
  },
  cuowu: {
    type: String,
    default: '错误',
  },
  zhengque: {
    type: String,
    default: '正确',
  },
})
const optChange = (val) => {
  //选择题正确选项
  props.modelValue.options.forEach((item, i) => {
    if (i != val) {
      item.isAnswer = false
    }
  })
}
const feedback = (val) => {
  //选项反馈
  props.modelValue.options[val].optionTipEditorShow =
    !props.modelValue.options[val].optionTipEditorShow
}
const addAnalysis = () => {
  //添加试题解析
  props.modelValue.explainEditorShow = !props.modelValue.explainEditorShow
  props.modelValue.explainEditorValue = ''
}
watch(
  () => props.modelValue,
  (newVal, oldVal) => {
    emit('update:modelValue', newVal)
  },
  { deep: true }
)
</script>

<style scoped>
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tigan {
  border-bottom: 1px dashed #dcdfe8;
  padding-bottom: 20px;
  margin-bottom: 10px;
}
.showOp {
  opacity: 0;
  transition: all 0.5s;
}
.hoverOptions:hover .showOp {
  opacity: 1;
}
.hoverOptions {
  display: flex;
  align-items: center;
}
.editorBox:hover .css{
  border: 1px solid #488cfb;
}
</style>